<html style="margin: 0; padding: 0">
  <head>
    <meta charset="utf-8" />
  </head>
  <body style="margin: 0; padding: 0">
    <input type="file" id="mp3Input" accept="audio/mpeg" />
<img id="coverImage" style="max-width: 300px;" />
<pre id="lyrics"></pre>

<script src="https://unpkg.com/jsmediatags@3.9.7/dist/jsmediatags.min.js"></script>
<script>
  document.getElementById('mp3Input').addEventListener('change', function(e) {
    const file = e.target.files[0];
    if (!file) return;

    // 解析元数据
    jsmediatags.read(file, {
      onSuccess: (result) => {
        // 1. 解析封面图片
        if (result.tags.picture) {
          const base64String = arrayBufferToBase64(result.tags.picture.data);
          document.getElementById('coverImage').src = `data:${result.tags.picture.format};base64,${base64String}`;
        }

        // 2. 解析歌词
        if (result.tags.lyrics) {
          document.getElementById('lyrics').textContent = result.tags.lyrics.lyrics;
        }
      },
      onError: (error) => {
        console.error('Error reading MP3 tags:', error);
      }
    });
  });

  // 工具函数：ArrayBuffer转Base64
  function arrayBufferToBase64(buffer) {
    let binary = '';
    const bytes = new Uint8Array(buffer);
    for (let i = 0; i < bytes.byteLength; i++) {
      binary += String.fromCharCode(bytes[i]);
    }
    return btoa(binary);
  }
  function fetchtag(){
    jsmediatags.read(file, {
      onSuccess: (result) => {
        let res = {cover: null,lyrics:''};
        // 1. 使用 Blob 处理封面图片（更快且内存友好）
        if (result.tags.picture) {
          const cover = result.tags.picture;
          // 直接创建 Blob 对象
          const blob = new Blob([cover.data], { type: cover.format });
          // 生成 Blob URL
          const blobUrl = URL.createObjectURL(blob);
          res.cover = blobUrl;
        }

        // 2. 歌词解析（保持不变）
        const lyricsElement = document.getElementById('lyrics');
        if (result.tags.lyrics) {
          res.lyrics = result.tags.lyrics.lyrics;
        }
        return res
      },
      onError: (error) => {
        return {}
      }
    });
  }
</script>
  </body>
</html>
